<template>
  <div>
    <div v-if="list.length > 0" style="position: sticky; top: 0;  z-index: 99">
      <div class="state-up" style="">
        <div class="u-page__tag-item" v-for="(item, index) in list" :key="index" style="flex-shrink: 0;">
          <u-tag class="xxx" :text="item.name" :plain="item.id != checkedID"
                 :borderColor="item.id != checkedID ? '#f8f8f8':'#98A5D6'"
                 :bgColor="item.id != checkedID ? '#E9F0FE' : '#fff'" color="#000" :name="index"
                 @click="recommendTag(item.id)"></u-tag>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Ftag',
  data() {
    return {
      icon: 'arrow-down',
      checkedID: 1,
    }
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [
          {id: 1, title: '问题1'},
          {id: 2, title: '问题2'},
        ]
      },
    },
  },
  methods: {
    recommendTag(id) {
      this.checkedID = id
      this.$emit('change', id)
    }
  },
}
</script>
<style lang="scss" scoped>
.state-down {
  display: flex;
  flex-wrap: nowrap;
}

.state-up {
  display: flex;
  flex-wrap: nowrap;
  //height: 80rpx;
  width: 100vw;
  overflow-x: auto;
  pointer-events: all;
}

.u-page__tag-item {
  margin: 18rpx 0 0 18rpx;
  pointer-events: all;
  /* width: 150rpx; */
}

</style>
